<template>
	<button @click="open = true">打开模态框</button>
	<Teleport to="body">
		<Transition>
			<div v-if="open" class="modal">
				<p>提示内容...</p>
				<button @click="open = false">关闭</button>
			</div>
		</Transition>
	</Teleport>
</template>

<script setup>
	import { ref } from "vue" 
	
	const open = ref(true) 
</script>

<style scoped>
	.modal {
		position: fixed;
		z-index: 999;
		top: 20%;
		left: 50%;
		width: 300px;
		margin-left: -150px;
		padding: 20px;
		text-align: center;
		border: 1px solid #ccc;
		background: #eee;
	}
	.v-enter-active,
	.v-leave-active {
		transition: all 0.25s ease-in-out;
	}
	.v-enter-from,
	.v-leave-to {
		opacity: 0;
		transform: translateY(-20px);
	}
</style>